<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>海报生成器</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tp-posters-layer {
            /*position: fixed;*/
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .6);
            display: flex;
            align-items: center;
            justify-content: center;
            /*visibility: hidden;*/
            /*z-index: -1000;*/
        }

        .tp-posters {
            width: 90%;
            max-width: 500px;
            background: #fff;
            border: 1px solid rgba(0, 0, 0, .2);
            padding: 10px;
            box-sizing: border-box;
            /*visibility: hidden;*/
            /*position: absolute;*/
            /*z-index: -1000;*/
        }

        .tp-posters-cover {
            width: 100%;
            text-align: center;
        }

        .tp-posters-cover img {
            width: 100%;
            max-width: 100%;
            max-height: 280px;
            border-radius: 8px;
        }

        .tp-posters h3 {
            color: #000;
            font-size: 16px;
            line-height: 30px;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .tp-posters p {
            color: rgba(0, 0, 0, .6);
            font-size: 14px;
            line-height: 20px;
            text-indent: 28px;
        }

        .tp-posters-bottom {
            width: 100%;
            display: flex;
            justify-content: space-between;
            border-top: 1px dashed rgba(0, 0, 0, .4);
            margin-top: 15px;
        }

        .tp-qr-txt {
            width: 70%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .tp-posters-logo {
            width: 100%;
            text-align: center;
        }

        .tp-posters-logo img {
            width: 40%;
        }

        .tp-qr-txt span {
            color: rgba(255, 0, 0, .6);
            font-size: 16px;
            font-weight: 600;
            line-height: 30px;
        }

        .tp-qr-code {
            width: 30%;
            padding: 15px;
            box-sizing: border-box;
        }

        .tp-qr-code img {
            width: 100%;
            border: 1px solid rgba(0, 0, 0, .6);
            padding: 5px;
            box-sizing: border-box;
        }

        .tp-posters-picture {
            width: 90%;
            max-width: 500px;
        }
    </style>
</head>

<body>
    <div class="tp-posters-layer">
        <div class="tp-posters">
            <!-- 当前海报封面图 -->
            <div class="tp-posters-cover">
                <img src="http://cdn.sharedblog.cn/sharedblog/img/19.png" alt="">
            </div>
            <!-- 当前海报标题 -->
            <h3>我是标题呀</h3>
            <!-- 当前海报详情 -->
            <p>我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍
            </p>
            <!-- bottom -->
            <div class="tp-posters-bottom">
                <div class="tp-qr-txt">
                    <!-- logo图片 -->
                    <div class="tp-posters-logo">
                        <img src="http://iqzhan.com/zb_users/theme//tx_resource/include/logo.png" alt="">
                    </div>
                    <span>长按识别&nbsp;&nbsp;二维码</span>
                    <span>精彩内容&nbsp;&nbsp;享不停</span>
                </div>
                <!-- 当前海报二维码 -->
                <div class="tp-qr-code">
                    <img src="http://cdn.sharedblog.cn/sharedblog/img/1.png" alt="">
                </div>
            </div>
        </div>
        <!-- 海报显示区域 -->
        <div class="tp-posters-picture">
        </div>
    </div>
    <a href="javascript:;" onclick="copy()">生成海报</a>
</body>

</html>


<script>
    function copy() {
        var pic;
        var canvas2 = document.createElement("canvas");
        var w = $('.tp-posters').outerWidth();
        var h = $('.tp-posters').outerHeight();

        //先放大2倍，后期缩小，处理模糊问题
        canvas2.width = w * 2;
        canvas2.height = h * 2;
        canvas2.style.width = w + "px";
        canvas2.style.height = h + "px";

        var context = canvas2.getContext("2d");
        // 进行缩放
        context.scale(2, 2);

        html2canvas(document.querySelector('.tp-posters'), {
            canvas: canvas2,
            allowTaint: true, //允许污染
            taintTest: true, //在渲染前测试图片
            // useCORS: true //使用跨域
        }).then(function (canvas) {
            pic = canvas;
            document.querySelector(".tp-posters-picture").appendChild(pic);
        });

    }
</script>